<template>
	<el-dialog title="案件列表" class="el-dialog" v-model="isShowDialog" fullscreen="true" align="center">
		<el-card shadow="hover" body-style="padding:8px; ">
			<div class="statistical-common-caselist-container">
				<el-form :inline="true" :model="formInline" size="mini">
					<el-form-item label-width="100px" label="文书编号">
						<el-input v-model="formInline.user" placeholder="请输入..."></el-input>
					</el-form-item>
					<el-form-item label-width="100px" label="案件性质">
						<el-input v-model="formInline.user" placeholder="请输入..."></el-input>
					</el-form-item>
					<el-form-item label-width="100px" label="案件名称">
						<el-input v-model="formInline.user" placeholder="请输入..."></el-input>
					</el-form-item>
					<el-form-item label-width="100px" label="案发时间">
						<el-date-picker
							v-model="formInline.caseTime"
							format="YYYY-MM-DD"
							value-format="YYYY-MM-DD"
							type="daterange"
							start-placeholder="开始时间"
							end-placeholder="结束时间"
						>
						</el-date-picker>
					</el-form-item>
					<el-form-item label-width="100px" label="主办干警">
						<el-input v-model="formInline.user" placeholder="请输入..."></el-input>
					</el-form-item>
					<el-form-item label-width="100px" label="主办单位">
						<el-input v-model="formInline.user" placeholder="请输入..."></el-input>
					</el-form-item>
					<el-form-item style="margin-left: 20px">
						<el-button type="primary" @click="onSubmit" icon="el-icon-search" size="small">查询</el-button>
						<el-button type="primary" @click="onSubmit" icon="el-icon-view" size="small">重置</el-button>
					</el-form-item>
				</el-form>
				<el-table
					ref="multipleTable"
					:data="tableData"
					:default-sort="{ prop: 'name', order: 'descending' }"
					:row-style="{ height: '0' }"
					:cell-style="{ padding: '0' }"
					size="medium"
					style="width: 100%"
					:row-class-name="tableRowClassName"
					@selection-change="handleSelectionChange"
				>
					<el-table-column align="center" type="selection" width="55" />
					<el-table-column align="center" label="序号" width="60">
						<template #default="scope">{{ scope.row.sn }}</template>
					</el-table-column>
					<el-table-column align="center" property="caseNo" sortable prop="caseNo" label="文书编号" />
					<el-table-column align="center" property="kyhNo" sortable prop="kyhNo" label="案件性质" show-overflow-tooltip />
					<el-table-column align="center" property="caseName" sortable label="案件名称" show-overflow-tooltip />
					<el-table-column align="center" property="caseTime" sortable label="案发时间" show-overflow-tooltip />
					<el-table-column align="center" property="casePerson" sortable label="主办干警" show-overflow-tooltip />
					<el-table-column align="center" property="caseOrg" sortable label="主办单位" show-overflow-tooltip />
					<el-table-column align="center" property="evidenceCount" sortable label="物品数量" show-overflow-tooltip />
					<el-table-column align="center" label="操作">
						<template #default="scope">
							<el-button type="success" @click="onDetailsInfo(scope.row)" plain size="mini">详情</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
					:page-sizes="[100, 200, 300, 400]"
					:page-size="100"
					layout="prev, pager, next, jumper,total,sizes"
					:total="400"
					@size-change="onHandleSizeChange"
					@current-change="onHandleCurrentChange"
					prev-text="上一页"
					next-text="下一页"
					background
				>
				</el-pagination>
			</div>
		</el-card>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="onCancel" size="small">取 消</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts">
import { ref, reactive, toRefs } from 'vue';
import { useRoute, useRouter } from 'vue-router';
export default {
	name: 'StatisticalCommonCaselist',
	components: {},
	setup() {
		const state = reactive({
			isShowDialog: false,
			formInline: {
				user: '',
				caseTime: '',
			},
			tableData: [
				{
					sn: '1',
					caseNo: 'A00000000000000000001',
					kyhNo: 'K00000000000000000001',
					caseName: '西郊杀人案',
					caseTime: '2021-10-01',
					casePerson: '刘备',
					caseOrg: 'XXX市公安局',
					evidenceCount: 5,
				},
				{
					sn: '2',
					caseNo: 'A00000000000000000001',
					kyhNo: 'K00000000000000000001',
					caseName: '西郊杀人案',
					caseTime: '2021-10-01',
					casePerson: '刘备',
					caseOrg: 'XXX市公安局',
					evidenceCount: 5,
				},
				{
					sn: '3',
					caseNo: 'A00000000000000000001',
					kyhNo: 'K00000000000000000001',
					caseName: '西郊杀人案',
					caseTime: '2021-10-01',
					casePerson: '刘备',
					caseOrg: 'XXX市公安局',
					evidenceCount: 5,
				},
				{
					sn: '4',
					caseNo: 'A00000000000000000001',
					kyhNo: 'K00000000000000000001',
					caseName: '西郊杀人案',
					caseTime: '2021-10-01',
					casePerson: '刘备',
					caseOrg: 'XXX市公安局',
					evidenceCount: 5,
				},
				{
					sn: '5',
					caseNo: 'A00000000000000000001',
					kyhNo: 'K00000000000000000001',
					caseName: '西郊杀人案',
					caseTime: '2021-10-01',
					casePerson: '刘备',
					caseOrg: 'XXX市公安局',
					evidenceCount: 5,
				},
				{
					sn: '6',
					caseNo: 'A00000000000000000001',
					kyhNo: 'K00000000000000000001',
					caseName: '西郊杀人案',
					caseTime: '2021-10-01',
					casePerson: '刘备',
					caseOrg: 'XXX市公安局',
					evidenceCount: 5,
				},
				{
					sn: '7',
					caseNo: 'A00000000000000000001',
					kyhNo: 'K00000000000000000001',
					caseName: '西郊杀人案',
					caseTime: '2021-10-01',
					casePerson: '刘备',
					caseOrg: 'XXX市公安局',
					evidenceCount: 5,
				},
				{
					sn: '8',
					caseNo: 'A00000000000000000001',
					kyhNo: 'K00000000000000000001',
					caseName: '西郊杀人案',
					caseTime: '2021-10-01',
					casePerson: '刘备',
					caseOrg: 'XXX市公安局',
					evidenceCount: 5,
				},
				{
					sn: '9',
					caseNo: 'A00000000000000000001',
					kyhNo: 'K00000000000000000001',
					caseName: '西郊杀人案',
					caseTime: '2021-10-01',
					casePerson: '刘备',
					caseOrg: 'XXX市公安局',
					evidenceCount: 5,
				},
				{
					sn: '10',
					caseNo: 'A00000000000000000001',
					kyhNo: 'K00000000000000000001',
					caseName: '西郊杀人案',
					caseTime: '2021-10-01',
					casePerson: '刘备',
					caseOrg: 'XXX市公安局',
					evidenceCount: 5,
				},
			],
		});
		const editCaseRef = ref();
		const router = useRouter();

		const onDetailsInfo = (row: any) => {
			router.push('/evidence/unit/details');
		};

		const tableRowClassName = (row: any, rowIndex: number) => {
			if (rowIndex === 1) {
				return 'warning-row';
			} else if (rowIndex === 3) {
				return 'success-row';
			}
			return '';
		};

		// 打开弹窗
		const openDialog = () => {
			state.isShowDialog = true;
		};
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};

		return {
			editCaseRef,
			onDetailsInfo,
			tableRowClassName,
			openDialog,
			onCancel,
			...toRefs(state),
		};
	},
};
</script>
